<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

            <van-swipe-item v-for="ele in bannerList">
                <van-image
                        width="100%"
                        :src="ele.imageUrl"
                />
            </van-swipe-item>

        </van-swipe>

        <van-tabs v-model="active" @click="selectCateHandler">
            <van-tab :title="ele.title" v-for="ele in cateList">
                <!--资讯列表-->
                <div v-for="ele in newsList">
                    <ul class="news-detail-item" :key="ele._id" @click="showDetail(ele)">
                        <li class="left">
                            <h2>{{ ele.title }}</h2>
                            <p>
                                <van-icon name="eye-o"/>
                                {{ ele.viewCount | formatNumberToQff }} 阅读
                            </p>
                            <p><i class="fa fa-calendar" aria-hidden="true"></i> {{ ele.createTime |
                                formatDateToHumanDate }}</p>
                        </li>
                        <li class="right">
                            <img :src="img_prefix_url + ele.imageUrl" alt="">
                        </li>

                    </ul>
                </div>
            </van-tab>

        </van-tabs>

    </div>
</template>

<script>
    import numeral from 'numeral'
    import moment from 'moment'

    import {getBanners, getNewsCate, getNewsListByCateId} from "../../api/news";

    export default {
        name: "index.vue",
        data() {
            return {
                newsList: [],
                cateList: [],
                bannerList: [],
                active: 0,
                img_prefix_url: 'https://yw.52kfw.cn',
            }
        },
        created() {
            this.getBanners();
            this.getNewsCate();

            // this.getNewsListByCateId(this.cateList[0].title);

        },
        watch: {
            // 如果是复合数据类型，在Vue里面做watch的时候，要使用深度监视
            cateList: {
                deep: true,
                handler(newVal, oldVal) {
                    this.getNewsListByCateId(newVal[0].title);
                }
            }
        },
        filters: {
            formatNumberToQff(val) {
                return numeral(val).format('0,0');
            },
            formatDateToHumanDate(val) {
                return moment(val).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        methods: {
            showDetail(ele) {
                this.$router.push({
                    path: '/detail',
                    query: {id: ele._id},
                });
            },
            selectCateHandler(index, title) {
                console.log(index, title);
                this.getNewsListByCateId(title);
            },
            async getNewsListByCateId(cateId) {
                let response = await getNewsListByCateId(cateId);
                console.log(response, '资讯列表');

                if (response.statusCode == 200) {
                    this.newsList = response.data.list;
                } else {
                    this.$toast({type: 'fail', message: '失败！'});
                }
            },
            async getNewsCate() {
                let response = await getNewsCate();
                console.log(response, '资讯分类');

                if (response.statusCode == 200) {
                    this.cateList = response.data.list;

                } else {
                    this.$toast({type: 'fail', message: '失败！'});

                }
            },
            async getBanners() {
                let posId = '6268bce29114094ca0ed2354';
                let response = await getBanners(posId);
                console.log(response, '首页轮播图');
                if (response.statusCode == 200) {
                    this.$toast({type: 'success', message: '加载成功！'});
                    this.bannerList = response.data.info.banners;

                } else {
                    this.$toast({type: 'fail', message: '失败！'});

                }
            }
        }
    }
</script>

<style scoped lang="less">
    .news-detail-item {
        display: flex;
        border-bottom: 1px solid #e4e4e4;
        padding: 0.3rem;
        justify-content: space-between;

        .left {
            margin-right: 0.6rem;

            > h2 {
                -webkit-box-sizing: border-box;
                font-size: .42rem;
                line-height: 1.2;
                color: #1a1a1a;
                font-weight: normal;

                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

            }

            > p {
                padding: 0.1rem 0;
                font-size: 0.24rem;
                color: #949494;
            }

        }

        .right {
            > .van-button {
                &:first-child {
                    margin-right: 0.1rem;
                }
            }

            img {
                width: 2rem;
                height: auto;
            }

        }
    }
</style>
